<!DOCTYPE html>
<html>
<head>
    <title>Socket.IO Client</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
<!--    <script src="https://cdn.socket.io/4.7.4/socket.io.min.js"></script>-->
    <style>
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        #messages { height: 300px; overflow-y: scroll; border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; }
        .message { margin-bottom: 5px; }
        .system { color: #666; }
        .server { color: #0066cc; }
        .client { color: #009933; }
    </style>
</head>
<body>
    <h1>Socket.IO Client</h1>
    <div id="messages"></div>
    <input type="text" id="messageInput" placeholder="Type your message...">
    <button onclick="sendMessage()">Send</button>

    <script>
        var socket = io.connect('http://' + document.domain + ':' + 5000);
        const messagesDiv = document.getElementById('messages');
        
        // Handle connection events
        socket.on('connect', () => {
            addMessage('System', 'Connected to server', 'system');
        });

        socket.on('disconnect', () => {
            addMessage('System', 'Disconnected from server', 'system');
        });

        // Handle incoming messages
        socket.on('system_message', (data) => {
            addMessage('System', data.message, 'system');
        });

        socket.on('monitoring_data', (data) => {
            addMessage(data.sender, data.message, 'server');
        });

        function sendMessage() {
            const input = document.getElementById('messageInput');
            const message = input.value.trim();
            if (message) {
                socket.emit('client_message', { message });
                addMessage('You', message, 'client');
                input.value = '';
            }
        }

        function addMessage(sender, message, type) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${type}`;
            messageDiv.innerHTML = `<strong>${sender}:</strong> ${message}`;
            messagesDiv.appendChild(messageDiv);
            messagesDiv.scrollTop = messagesDiv.scrollHeight;
        }
    </script>
</body>
</html>
